<!-- 右下角图标说明 -->
<template>
  <div class="left-bottom">
    <!-- 非保障车 -->
    <el-checkbox
      v-model="checkAllNotGuarantee"
      :indeterminate="isIndeterminateNotGuarantee"
      @change="handleCheckAllChangeNotGuarantee"
      >城市侧图例</el-checkbox
    >
    <el-checkbox-group
      v-model="multipleSelectionNotGuarantee"
      @change="handleCheckedIconChangeNotGuarantee"
    >
      <el-checkbox
        v-for="item in iconStaticTableDataNotguarantee"
        :key="item.flag"
        :label="item"
        @change="handleCheckBoxNotGuarantee"
      >
        <img :src="item.imgUrl" alt="图标" style="width: 10px; height: 20px" />
        {{ item.picIcon }}
      </el-checkbox>
    </el-checkbox-group>
    <el-divider></el-divider>
    <!-- 保障车 -->
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      >保障图例</el-checkbox
    >
    <el-checkbox-group
      v-model="multipleSelection"
      @change="handleCheckedIconChange"
    >
      <el-checkbox
        v-for="item in iconStaticTableData"
        :key="item.flag"
        :label="item"
        @change="handleCheckBox"
      >
        <div style="display: flex; align-items: flex-end">
          <img :src="item.imgUrl" alt="图标" :style="getStyle(item.flag)" />
          &nbsp;{{ item.picIcon }}
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, ref, computed } from 'vue';
export default {
  name: 'RightBottom',
  emits: { handleShowWhich: null, showWhichNotGuaranteeEmit: null },
  setup(props, ctx) {
    const checkAll = ref(false);
    const checkAllNotGuarantee = ref(false);

    const isIndeterminate = ref(false);
    const isIndeterminateNotGuarantee = ref(false);

    const state = reactive({
      multipleTableRef: ref(null),
      multipleSelection: [],
      multipleSelectionNotGuarantee: [],
      iconStaticTableData: ref([
        {
          picIcon: '场馆',
          imgUrl: require('../../../assets/imgHome/mapIcon/venue.png'),
          flag: 'venue',
        },
        {
          picIcon: '医院',
          imgUrl: require('../../../assets/imgHome/mapIcon/hospital.png'),
          flag: 'hospital',
        },
        {
          picIcon: '在线医疗点',
          imgUrl: require('../../../assets/imgHome/mapIcon/医疗点-1.png'),
          flag: 'venue-medical-point-online',
        },
        {
          picIcon: '离线医疗点',
          imgUrl: require('../../../assets/imgHome/mapIcon/医疗点-灰1.png'),
          flag: 'venue-medical-point-offline',
        },
        {
          picIcon: '任务中',
          // imgUrl: require("../../../assets/imgHome/mapIcon/task-vehicle.png"),
          // imgUrl: require("../../../assets/imgHome/mapIcon/task-vehicle_yc.png"),
          imgUrl: require('../../../assets/imgHome/mapIcon/task-vehicle_dxhd.png'),
          flag: 'taskvehicle',
        },
        {
          picIcon: '待命中',
          // imgUrl: require("../../../assets/imgHome/mapIcon/on-vehicle.png"),
          // imgUrl: require("../../../assets/imgHome/mapIcon/on-vehicle_yc.png"),
          imgUrl: require('../../../assets/imgHome/mapIcon/on-vehicle_dxhd.png'),
          flag: 'onvehicle',
        },
        {
          picIcon: '离线中',
          // imgUrl: require("../../../assets/imgHome/mapIcon/notask-vehicle.png"),
          // imgUrl: require("../../../assets/imgHome/mapIcon/notask-vehicle_yc.png"),
          imgUrl: require('../../../assets/imgHome/mapIcon/notask-vehicle_dxhd.png'),
          flag: 'notaskvehicle',
        },
      ]),
      iconStaticTableDataNotguarantee: ref([
        {
          statusCode: 1,
          picIcon: '任务中',
          imgUrl: require('../../../assets/imgHome/mapIcon/notguarantee-task-vehicle.png'),
          flag: 'notguarantee-task-vehicle',
        },
        {
          statusCode: 2,
          picIcon: '待命中',
          imgUrl: require('../../../assets/imgHome/mapIcon/notguarantee-ontask-vehicle.png'),
          flag: 'notguarantee-ontask-vehicle',
        },
      ]),
    });

    const getStyle = (flag) => {
      let customStyle = {
        with: '25px',
        height: '25px',
      };
      if (
        flag == 'taskvehicle' ||
        flag == 'onvehicle' ||
        flag == 'notaskvehicle'
      ) {
        customStyle.height = '30px';
        customStyle.with = '30px';
      }
      return customStyle;
    };
    // 保障车
    const handleSelectionChange = (val) => {
      // console.log(val)
      state.multipleSelection = val;
      ctx.emit('handleShowWhich', state.multipleSelection);
    };

    const handleCheckAllChange = (val) => {
      // console.log(val)
      state.multipleSelection = val ? [...state.iconStaticTableData] : [];
      isIndeterminate.value = false;
      handleSelectionChange(state.multipleSelection);
      // state.multipleTableRef.clearSelection()
    };

    const handleCheckedIconChange = (value) => {
      // console.log(value)
      // console.log(state.iconStaticTableData.length)
      const checkedCount = value.length;
      checkAll.value = checkedCount === state.iconStaticTableData.length;
      isIndeterminate.value =
        checkedCount > 0 && checkedCount < state.iconStaticTableData.length;
      handleSelectionChange(value);
    };
    // 复选框一个个单选时的操作
    const handleCheckBox = (val, e) => {};
    // 非保障车
    const handleSelectionChangeNotGuarantee = (val) => {
      // console.log(val)
      state.multipleSelectionNotGuarantee = val;
      ctx.emit(
        'showWhichNotGuaranteeEmit',
        state.multipleSelectionNotGuarantee,
      );
    };
    const handleCheckAllChangeNotGuarantee = (val) => {
      // console.log(val)
      state.multipleSelectionNotGuarantee = val
        ? [...state.iconStaticTableDataNotguarantee]
        : [];
      isIndeterminateNotGuarantee.value = false;
      handleSelectionChangeNotGuarantee(state.multipleSelectionNotGuarantee);
    };
    const handleCheckedIconChangeNotGuarantee = (value) => {
      // console.log(value)
      // console.log(state.iconStaticTableData.length)
      const checkedCount = value.length;
      checkAllNotGuarantee.value =
        checkedCount === state.iconStaticTableDataNotguarantee.length;
      isIndeterminateNotGuarantee.value =
        checkedCount > 0 &&
        checkedCount < state.iconStaticTableDataNotguarantee.length;
      handleSelectionChangeNotGuarantee(value);
    };

    const handleCheckBoxNotGuarantee = (val, e) => {};
    onBeforeMount(() => {});
    onMounted(() => {
      state.multipleSelection = [
        state.iconStaticTableData[2],
        state.iconStaticTableData[4],
        state.iconStaticTableData[5],
      ];
      isIndeterminate.value = true;
    });
    const refState = toRefs(state);
    return {
      // 状态
      ...refState,
      // 事件处理
      handleSelectionChange,
      checkAll,
      checkAllNotGuarantee,
      isIndeterminate,
      isIndeterminateNotGuarantee,
      // checkedIcons,
      handleCheckAllChange,
      handleCheckedIconChange,
      handleCheckBox,
      handleCheckBoxNotGuarantee,
      handleCheckAllChangeNotGuarantee,
      handleCheckedIconChangeNotGuarantee,
      getStyle,
    };
  },
};
</script>
<style scoped>
.left-bottom {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background-color: rgba(215, 215, 215, 0.2);
  border-radius: 5px;
  padding: 5px;
  border: 1px solid rgba(220, 220, 220, 0.6);
}

.el-divider--horizontal {
  margin: 10px 0;
  /* position: relative; */
}
</style>
